<template>
  <div>
    <!-- 
      vue-router@3版本中有一个tag属性，可以指定对应编译后的html标签
      在vue-router@4版本中就没有此属性，通过插槽完成
     -->
    <RouterLink to="/">首页</RouterLink>&nbsp;&nbsp;|&nbsp;&nbsp;
    <RouterLink to="/about">关于</RouterLink>&nbsp;&nbsp;|&nbsp;&nbsp;
    <RouterLink to="/news/100">新闻100</RouterLink>&nbsp;&nbsp;|&nbsp;&nbsp;
    <!-- 
      custom:true时，它会去除routerlink编译成的a标签，如果不加，则它会在a标签下面创建你所定义的子标签
     -->
    <!-- <RouterLink to="/news/200" custom v-slot="{ isActive, href, navigate }">
      <span
        v-bind="$attrs"
        :href="href"
        :class="isActive ? activeClass : inactiveClass"
        @click="navigate"
      >
        新闻200
      </span>
    </RouterLink> -->
    <RouterLink to="/news/200" custom v-slot="{ navigate }">
      <span @click="navigate"> 新闻200 </span>
    </RouterLink>&nbsp;&nbsp;|&nbsp;&nbsp;
    <!-- <my-link a="aa">新闻2000</my-link> -->
    <RouterLink to="/todo">任务列表</RouterLink>
  </div>
  <hr />
  <!-- 
    路由切换过渡 
    注:如果你使用了过渡路由切换,则在路由匹配渲染的视图组件则一定要有一个顶层元素来包裹,否则没有效果
  -->
  <router-view v-slot="{ Component }">
    <transition
      mode="out-in"
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
export default {}
</script>

<style lang="scss">
/* :root 作用域 选择器 css3提供的 */
/* css变量 */
/* :root {
  --animate-duration: 1.5s;
  --animate-delay: 1.5s;
} */
/* .a{
  duration:var(--animate-duration)
} */

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  /* transform: translateX(20px); */
}
</style>
